/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Divider, Typography } from 'antd';
import { connect } from 'dva';
const { Title } = Typography;

@connect(({ payment, loading }) => ({
  payment,
  getOrderDetail: loading.effects['orderRecord/getOrderRecordDetail']
}))
export default class OrderDetail extends Component {

  componentDidMount() {
    const { dispatch, id } = this.props
    dispatch({
      type: 'payment/getPaymentDetail',
      payload: {
        id: id
      }
    })
  }

  render() {
    const {
      payment: { paymentDetail }
    } = this.props
    const {
      orderNumber, createTime, statusText, wayBillNo, isRealname, 
      senderName, senderPhone, senderProvince, senderCity, senderArea, senderAddress, remark, goodsType,
      chargingWeight, receiveName, receivePhone, receiveProvince, receiveCity, receiveArea, receiveAddress,
      collectionAmount, pickerName, pickerMobile
    } = paymentDetail

    return (
      <div className='order-detail'>
        <Row type='flex' justify="space-between" gutter={[24, 24]}>
          <Col>
            <Title level={3} >订单详情</Title>
          </Col>
          <Col>{this.props.children}</Col>
        </Row>
        <Divider />
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <h3 style={{fontWeight:"bolder"}}>订单信息</h3>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <span>订单编号：</span><span>{orderNumber}</span>
          </Col>
          <Col span={8}>
            <span>下单时间：</span><span>{createTime}</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <span>订单状态：</span><span>{statusText}</span>
          </Col>
          <Col span={8}>
            <span>受理业务员：</span><span>{pickerName || '暂无'}（{pickerMobile || '暂无'}）</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <span>运单号：</span><span>{wayBillNo}</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <span>实名状态：</span><span>{isRealname}</span>
          </Col>
        </Row>
        <Divider />
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <h3 style={{fontWeight:"bolder"}}>面单信息</h3>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <span>发件人信息：</span><span>{senderName}，{senderPhone}，{senderProvince}，{senderCity}，{senderArea}</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <span>收件人信息：</span><span>{receiveName}，{receivePhone}，{receiveProvince}，{receiveCity}，{receiveArea}，{receiveAddress}</span>
          </Col>
        </Row>

        <Divider />
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <h3 style={{fontWeight:"bolder"}}>物品信息</h3>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <span>发件物品类型：</span><span>{goodsType}</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <span>物品重量：</span><span>{chargingWeight}</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <span>备注信息：</span><span>{remark}</span>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={5}>
            <span>代收货款金额：</span><span style={{color:'red'}}>{collectionAmount}</span><span>（元）</span>
          </Col>
        </Row>
      </div>
    )
  }
}

OrderDetail.propTypes = {
  wayBillNo: PropTypes.string
}